<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<title>支付</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
	<meta content="yes" name="apple-mobile-web-app-capable">     
	<meta content="black" name="apple-mobile-web-app-status-bar-style">     
	<meta content="telephone=no" name="format-detection">
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css?v=10" />
	<link rel="stylesheet" type="text/css" href="/H5/css/reset.css?v=10" />
	<link rel="stylesheet" type="text/css" href="/H5/css/order.css?v=10" />
	<style>
		.dzfyue{
			width:100%;
			padding-left:.75em;
			font-size:.7rem;
			text-align:right;
			}
		.weix,.yue{
			float:left;
			margin-left:5%; 
			font-size:.75rem;
			}
		.red{
			color:red;
			line-height:18px;
			}
		.weix{
			line-height:40px;
		}
		.bth{
			width:100%;
			height:44px;
			color:white;
			background:red;
			bottom:0;
			position:fixed;
            max-width: 540px;
			}
        .item-inner a div:first-child{
            display: inline-block;
            border-radius: 1rem;
            background-color: rgb(255, 121, 22);
            padding: .18rem .4rem .1rem .4rem;
            color: rgba(255, 255, 255, 0.82);
            margin-left: 1rem;
        }
	</style>
</head>
<body>
	<div class="page-group ms-controller" :controller="pay">
        <div class="page page-current">
            <header class="bar bar-nav">
              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1)"></a>
              	<a class="icon icon-home pull-right" href="/H5"></a>
              	<h1 class="title">支付</h1>
            </header>
            <div class="content visibility">
            	<a :attr="{'href': @data.is_invite==0?'/H5/orderlist?status=0':'/H5/friendlist?type=1&status=0'}" style="display: block; float: right; margin: 0 5%;padding: 2% 0; font-size: .8rem">订单中心</a>
      			<div class="list-block" style="background:white; margin:0; clear: both">
                	<div class="item-content" style="padding:14px;">
                        <div class="item-inner" style=" background:#f1f1f1;">
                                <div class="dzfyue">待支付金额：<b class="red">￥{{@data.pay_money}}</b></div>
                        </div>
    				</div>
                    <div class="item-content" style="padding:0; display: none">
                        <div class="item-inner" style="padding-left:.75rem">
                            <div style="width:84%">
                                <div>申请余额支付(免邮)</div>
                                <div style="margin-top: .5rem;">
                                    <img src="images/yue.jpg" style="height:30px;vertical-align: top"><b class="red">￥{{@info.balance}}</b><a href="javascript:window.history.go(0)"><div>点击刷新</div></a>
                                </div>
                            </div>
                            <div class="item-input" style="width: 15%;">
                                <label class="label-switch" style="float:right;">
                                    <input name="ye" :on-change="@change($event)" type="checkbox">
                                    <div class="checkbox"></div>
                                </label>
                            </div>
                        </div>
                    </div>
                     <div :if="@mb" class="item-content" style="padding:0;display: block">
                        <div class="item-inner" style="padding-left:.75rem">
                            <div style="width:100%">
                                <img src="images/weix.jpg" style="float:left; height:40px;">
                                <div class="weix">微信支付</div>
                            </div>
                            <div class="item-input">
                                <label class="label-switch" style="float:right;">
                                    <input name="wx" :on-change="@change($event)" type="checkbox">
                                    <div class="checkbox"></div>
                                </label>
                            </div>
                        </div>
    				</div>
                </div>
    			<button class="bth" :on-click="@payMoney">立即支付</button> 
            </div>
        </div>
    </div>
	<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
	<script>
		var pay = avalon.define({
			$id: "pay",
			info: {},
			// mb: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
			mb: (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})(),
			data: {},
			deal: 0,
			s: 0,
			orderId: Mall.parseUrl( window.location.href ).orderId,
			getInfo: function(){
				Mall.request( "/api/UserInfo" )
					.always( function( data ){
						if( data.error_code == 0 ){
							pay.info = data.data;
							if( Number(pay.info.balance) < Number(pay.data.pay_money) ){
								/*if(pay.data.postage == 0){
									pay.data.pay_money = Number(pay.data.total_money)+6;
								}*/
								$( "input[name=wx]" ).prop( "checked", true );
							}
							else{
								pay.data.pay_money = pay.data.total_money;
								$( "input[name=ye]" ).prop( "checked", true );
							}
							$( ".content" ).removeClass( "visibility" );
						}
					} )
			},
			getOrderDetail: function(){
				Mall.request( "/api/OrderDetail", {order_no: pay.orderId} )
					.always( function( data ){
						if( data.error_code == 0 ){
							pay.data = data.data;
							pay.deal = data.data.is_order_deal;
						}
					} )
			},
			change: function( e ){
				if( Number(pay.info.balance) < Number(pay.data.pay_money) && $( e.target ).attr( "name" ) == "ye" ){
					pay.data.pay_money = pay.data.total_money;

					$.toast( "当前账户余额不足", 2000, "warning" );
					$( "input[name=ye]" ).prop( "checked", false );
				}
				else{
					/*if(pay.deal == 0){
						if(pay.data.postage == 0){
							pay.data.pay_money = Number(pay.data.pay_money)+6;
							pay.s = 6;
						}
						pay.deal = 1;
					}*/


					if( !$( e.target ).prop( "checked" ) ){
						$( e.target ).prop( "checked", false )
					}
					else{
						$( "input" ).prop( "checked", false )
						$( e.target ).prop( "checked", true )
					}
				}

				if($( e.target ).attr( "name" ) == "ye"){
					pay.data.pay_money = pay.data.total_money;
				}else {
					/*if(pay.data.postage == 0){
						pay.data.pay_money = Number(pay.data.total_money)+6;
					}*/
				}
			},
			checkPay: function(){
				var timer = setInterval( function(){
					Mall.request( "/api/OrderDetail", {order_no: pay.orderId} )
						.always( function( data ){
							if( data.error_code == 0 ){
								if( data.data.order_status == 0 ){
									$("button.bth").text( "立即支付" );
								}
								else if( data.data.order_status == 1 ){
									window.location.href="/H5/paysuccess?orderId="+pay.orderId;
									clearInterval( timer )
								}
							}
						} )
				}, 2000 )
			},
			payMoney: function(){
				var postData = {
					order_no: pay.orderId,
				}
				if( $("input:checked").attr( 'name' ) == "ye" ){
			    	$.prompt("请输入支付密码", function( value ){
			    		postData.pay_password = value;
			    		postData.pay_type = 1;
			    		Mall.request( "/api/OrderPay", postData )
			    			.always( function( data ){
			    				if( data.error_code == 0 ){
			    					$.toast( "支付成功", 1000, "success", function(){
			    						if( pay.data.is_invite == 0 ){
			    							window.location.href = "/H5/orderdetial?orderId="+pay.orderId
			    						}
			    						else{
			    							if( pay.data.is_my_invite == 0 ){
			    								window.location.href = "/H5/orderdetial?orderId="+pay.orderId
			    							}
			    						}
			    					} )
			    				}
			    			} )
			    	})
			    	$( "input.modal-text-input" ).attr( "type", "password" )
				}
				else if( $("input:checked").attr( 'name' ) == "wx" ){
					if( $("button.bth").text() == "立即支付" ){
						var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
						$("button.bth").text( "支付中..." )
						if( is_weixin ){
							postData.pay_type = 4;
							Mall.request( "/api/OrderPay", postData )
								.always( function( data ){
									if( data.error_code == 0 ){
										function onBridgeReady(){
										   WeixinJSBridge.invoke(
										      'getBrandWCPayRequest', {
										         "appId": data.data.wxjs.appId,     //公众号名称，由商户传入     
										         "timeStamp":data.data.wxjs.timeStamp,         //时间戳，自1970年以来的秒数     
										         "nonceStr":data.data.wxjs.nonceStr, //随机串     
										         "package":data.data.wxjs.package,     
										         "signType":"MD5",         //微信签名方式：     
										         "paySign":data.data.wxjs.paySign //微信签名 
										      },
										      function(res){
										      if(res.err_msg == "get_brand_wcpay_request:ok" ){
										      // 使用以上方式判断前端返回,微信团队郑重提示：
										            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
										      	window.location.href="/H5/paysuccess?orderId="+pay.orderId;
										      } 
										   }); 
										}
										if (typeof WeixinJSBridge == "undefined"){
										   if( document.addEventListener ){
										       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
										   }else if (document.attachEvent){
										       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
										       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
										   }
										}else{
										   onBridgeReady();
										}
									}else {
										Mall.request("/api/Logout")
												.always(function(data){
													if( data.error_code == 0 ){
														simpleStorage.set('token', undefined);
														simpleStorage.set('isOauth', undefined);
														window.location.href='/index/oauthSub';
													}
												});
									}
									$("button.bth").text( "立即支付" );
								} )
						}
						else{
							postData.pay_type = 3;
							Mall.request( "/api/OrderPay", postData )
								.always( function( data ){
									if( data.error_code == 0 ){
										window.location.href = data.data.wxh5.pay_url;
									}
								} )
						}
					}
				}
				else{
					$.toast( "请选择支付类型", 2000, "warning" );
				}	
			}
		})
		pay.getOrderDetail();
		pay.getInfo();
		pay.checkPay();
		avalon.scan( document.body )
	</script>
</body>
</html>